<template>
  <div class="progress"
       @click="setProClick($event)">
       <!-- 宽度动态设置的 -->
    <div class="pro-line"
         :style="{width:proLine+'px'}"></div>
    <div class="pro-load"
         :style="{transform:'translateX('+proLoad+'px)'}"
         ref="load">
    </div>
  </div>
</template>

<script>
export default {
  name: 'Progress',
  data () {
    return {
      proLine: 0,
      proLoad: 0,
      width: 0,
      offsetLeft: 0,
      // 比例
      scale: 0
    }
  },
  methods: {
    setProClick (e) {
      this.setPro(e.clientX - this.$el.offsetLeft);
      this.scale = (this.proLine / this.$el.offsetWidth).toFixed(2);
      this.$emit('childclick', this.scale);
    },
    setProgress (scale) {
      this.proLine = scale * this.$el.offsetWidth;
      this.proLoad = scale * this.$el.offsetWidth;
    },
    setPro (changeX) {
      this.proLine = changeX;
      this.proLoad = changeX;
    },
  }
}
</script>

<style scoped>
.progress {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  cursor: pointer;
  background: #fff;
  position: relative;
}
.progress .pro-line {
  width: 10px;
  height: 100%;
  background: #00aa85;
}
.progress .pro-load {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  position: absolute;
  transform: translate(50px);
  top: 0;
  bottom: 0;
  margin: auto;
}
.mess {
  height: 10px;
  background: #fff;
  margin-top: -60px;
}
</style>
